<template>
  <view class="title">
    <image src="../../static/title.png" style="height:110rpx;width:264rpx ;"></image>
  </view>
  <view class="loginphone">
    <input class="input" name="userName" placeholder="请输入手机号"  @input="setPhone" maxlength="11" />
  </view>
  <view class="loginphone">
    <input class="input" name="userName" placeholder="请输入验证码"  @input="setCaptcha" maxlength="6" />
    <button class="but" slot="button" size="small" bind:tap="yanzhen" @click="duanxinf" v-if="pvp===true">获取验证码</button>
    <button class="but2" slot="button" size="small" bind:tap="yanzhen" v-if="pvp!==true">{{timeLeft}}秒后重试</button>
  </view>
  <view class="agree">
    <checkbox class="check" @click="sehzhi1"></checkbox>
    <text>我已阅读并同意</text>
    <text v-for="(item,index) in contract" :key="item.id">
      <text @click="documentation(item.url)" class="xeiyi">{{item.name}}</text>
    </text>
  </view>
  <button class="login" @click="getPhoneNumber">一键注册登录</button>

</template>

<script setup>
  import {
    onShow
  } from '@dcloudio/uni-app';
  import {
    onMounted
  } from 'vue';
  import Base64 from 'base-64';
  import {
    ref
  } from "vue";
  import {
    fetchUserCaptcha,
    fetchCaptchaToken
  } from "../../request/login.js"
  import wx from "weixin-js-sdk"
  const contract = ref([])
  const cc = ref(false)
  const pvp = ref(true)
  const phone = ref("")
  const authCode = ref("")
  const yanzhengma = ref("")
  const timeLeft = ref(60);
  onMounted(() => {
    contract.value = [{
        id: 1,
        name: "《隐私政策》",
        url: "/pages/documentation/privacypolicy"
      },
      {
        id: 2,
        name: "《平台服务协议》",
        url: "/pages/documentation/serviceagreement"
      },
      {
        id: 3,
        name: "《平台注册协议》",
        url: "/pages/documentation/registrationagreement"
      },
    ]
  })
  function sehzhi1(){
    cc.value = !cc.value
  }
  function setPhone(event) {
    phone.value = event.detail.value
  }
  function setCaptcha(event){
    authCode.value = event.detail.value
  }

  function getPhoneNumber(){ // 获取登录信息、
    if (cc.value === true) {
      if (!phone.value) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none"
        })
        return
      }
      if (!authCode.value) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none"
        })
        return
      }
      let data;
      data = {
        authCode: authCode.value,
        phone: phone.value
      }
      fetchCaptchaToken(data).then(res => {
        if (res.code === 200) {
          console.log("token", res)
          uni.setStorageSync("Token", res.data.tokenHead + res.data.token)
          uni.setStorageSync("Phone",  phone.value)
          uni.reLaunch({
            url: "/pages/home/home"
          })
        } else {
          messageTitle(res.message)
        }
      }).catch(err => {
        messageTitle(err.message)
      })
    } else {
      uni.showToast({
        title: '请勾选和阅读用户协议',
        icon: 'none'
      })
    }
  }

  function isWechat(){
    return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  };

  function updateCountdown(){
    if (timeLeft.value > 0) {
      timeLeft.value--;
      setTimeout(updateCountdown, 1000); // 每秒更新一次
    } else {
      timeLeft.value = 60;
      pvp.value = !pvp.value
      console.log(pvp.value)
    }
  };
  function duanxinf(){
    pvp.value = !pvp.value
    updateCountdown();
    fetchUserCaptcha(phone.value).then(res => {
      console.log("authCode", res)
      // messageTitle(res.message)
      if (res.code === 200) {

      }
    }).catch(err => {
      messageTitle(err.message)
    })
  }
  function messageTitle(message){
    uni.showToast({
      title: message,
      icon: "none"
    })
  }
  function documentation (url){
    uni.navigateTo({
      url: url
    })
  }
</script>

<style>
  .button {
    border-radius: 200rpx;
    /* width: calc(50% - 5rpx); /* 让按钮宽度为50%，减去间距的一半 */
    background-color: #2846FF;
    color: white;
    margin-top: 20rpx;
    /* margin-right: 20rpx; /* 设置按钮之间的右边距为10rpx */
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .tanchu {
    background-color: white;
    min-height: 500rpx;
    width: 500rpx;
    margin: 0 auto;
    border-radius: 30rpx;
  }

  .weizhi {
    width: 90%;
    margin: 0 auto;
  }

  .xeiyi {
    color: rgb(75, 75, 214);
  }

  .title {
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vh;
    font-size: 2.2rem;
    color: rgb(75, 75, 214);
    font-weight: 500;
  }

  .loginphone {
    width: 600rpx;
    margin: 0 auto;
    border: darkgrey solid 1rpx;
    height: 80rpx;
    border-radius: 20rpx;
    /* line-height: 40px; */
    padding-left: 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    position: relative;
    overflow: hidden;
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }

  .but {
    width: 200rpx;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 27rpx;
    line-height: 80rpx;
    color: white;
    border-radius: 0;
    background-color: #0088FF;
    z-index: 10;
  }

  .but2 {
    width: 200rpx;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 27rpx;
    line-height: 80rpx;
    color: white;
    border-radius: 0;
    background-color: #007be6;
    z-index: 10;
  }



  .agree {
    font-size: 25rpx;
    color: rgb(129, 126, 126);
    font-size: 24rpx;
    width: 83%;
    margin: 0 auto;
    overflow-wrap: break-word;
    /* 允许长单词换行 */
    word-wrap: break-word;
    /* 处理超出宽度的单词 */
    white-space: normal;
    /* 允许正常换行 */

  }

  .agree a {
    color: rgb(20, 35, 243);
  }

  .login {
    width: 600rpx;
    border-radius: 100px;
    background: rgba(19, 136, 255, 1);
    color: white;
    font-size: 30rpx;
    margin-top: 50rpx;
    height: 75rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wei {
    text-align: center;
    margin-top: 50rpx;
  }

  .wei image {
    width: 80rpx;
    height: 80rpx;

  }

  .weideng {
    text-align: center;
    font-size: small;
  }
</style>
